import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'

import { Dialog } from 'antd-mobile'

import { payment } from '@/modules/order'

import Reducers from '@/modules'
import { useHistory } from 'react-router-dom'

type IStore = ReturnType<typeof Reducers>

type Props = {}

function Order({}: Props) {
  // 用户给商家的留言什么的
  const [msg, setMsg] = useState('')
  const history = useHistory()

  const store = useSelector(({ orderInfo }: IStore) => orderInfo)

  function pay() {
    Dialog.confirm({
      content: '是否提交申请',
      onConfirm: () => {
        // 调用本地后台的支付接口
        // 具体的参数根据公司接口文档来
        payment({
          ...store,
          body: msg,
          // 支付成功后浏览器返回的地址
          returnUrl: window.location.href,
        }).payload.then((res: any) => {
          console.log(res, '支付接口会把订单的相关信息合并后生成一个支付宝的地址返回给前台')
          if (res.code === 200) {
            // 跳转到支付宝的支付窗口
            history.replace(res.result)
          }
        })
      },
    })
  }

  return (
    <div className="docwrap car">
      <div className="goods-list">还是商品信息什么的一堆</div>
      <div className="msg-wrap">
        <input value={msg} onChange={(e: any) => setMsg(e.target.value)} type="text" />
      </div>
      <div className="confirm">
        <button onClick={pay}>支付</button>
      </div>
    </div>
  )
}

export default Order
